<template>
  <view class="image-pic" :style="'background-image:url(' + currentData.image + ')'">
    <!-- <view class="image-article"></view> -->
  </view>
  <h3 class="tn-text-left tn-margin-sm">{{ currentData.workoutName }}</h3>
  <view
    class="flex flex-row justify-between color-gray-4 m-5 p-2 border border-solid border-gray-3 rounded-lg"
  >
    <view class="flex flex-col center">
      <view class="font-size-3">户型</view>
      <view class="flex flex-row justify-between color-[#02C0D1]">4室2厅</view>
    </view>
    <view class="flex flex-col center">
      <view class="font-size-3">面积</view>
      <view class="flex flex-row justify-between color-[#02C0D1]">--</view>
    </view>
    <view class="flex flex-col center">
      <view class="font-size-3">风格</view>
      <view class="flex flex-row justify-between color-[#02C0D1]">现代</view>
    </view>
    <view class="flex flex-col center">
      <view class="font-size-3">合同</view>
      <view class="flex flex-row justify-between color-[#02C0D1]">--</view>
    </view>
  </view>

  <wd-cell-group>
    <wd-cell is-link to="/pages/index/index">
      <template #title>
        <view>
          <view style="display: inline-block; margin-right: 8px; color: #9b9b9b">小区</view>
          <view class="end-time">东城逸家逸品园</view>
        </view>
      </template>
      <view class="text-gray-4 font-size-3">查看</view>
    </wd-cell>
    <wd-cell is-link to="/pages/index/index">
      <template #title>
        <view>
          <!--f1f1f1   -->
          <view style="display: inline-block; margin-right: 8px; color: #9b9b9b">公司</view>
          <view class="end-time">桓昇装修</view>
        </view>
      </template>
      <view class="text-gray-4 font-size-3">查看</view>
    </wd-cell>
    <wd-cell is-link to="/pages/index/index">
      <template #title>
        <view style="display: flex; flex-direction: row">
          <!--f1f1f1   -->
          <view style="display: inline-block; margin-right: 8px; color: #9b9b9b">粉丝</view>
          <view
            style="
              display: flex;
              flex-direction: row;
              align-items: column;
              margin: 5px;
              margin-left: 5px;
            "
          >
            <view
              style="
                width: 40rpx;
                height: 40rpx;
                background-image: url('https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg');
                background-size: cover;
                border-radius: 50%;
              "
            ></view>
          </view>
        </view>
      </template>
      <view class="text-gray-4 font-size-3">等1位</view>
    </wd-cell>
  </wd-cell-group>
  <wd-cell-group>
    <h3 class="tn-text-left tn-margin-sm inline-block">装修动态</h3>
    <text class="text-gray-4 inline-block font-size-3">共19条</text>
    <wd-steps class="tn-margin-sm" :active="activeStep" dot>
      <wd-step v-for="(item, index) in steps" :key="index" :title="item.title" />
    </wd-steps>
  </wd-cell-group>
  <view class="ping_zhanshi p-2">
    <view class="quanbupinglun">全部评论（{{ ly_size }}）</view>
    <view v-for="(item, index) in comment_content" class="ping_box" :key="index">
      <view class="ping_contents" v-if="item.post_id === currentData.id ? true : false">
        <view class="ping_box" v-if="item.comment_content == '' ? false : true">
          <text class="ping_useame_01">{{ item.commentator }}</text>
          <view class="flex" @click="handleClick">
            <view class="i-carbon-add-comment text-gray-4 font-size-4" />
            <text class="ping_useame_01">回复</text>
          </view>
        </view>
        <view>
          <wd-img v-if="item.image" :width="100" :height="100" :src="item.image" />
          <view class="ping_val">{{ item.comment_content }}</view>
        </view>

        <view class="bg-gray-50">
          <view v-for="(hui_val_Name, index) in reply_data" :key="index">
            <view class="p-2 huifu_content" v-if="hui_val_Name.comment_id === item.id">
              <text>{{ hui_val_Name.responder }}</text>
              <text class="ping_hui">回复</text>
              <text>{{ hui_val_Name.commentator }}</text>
              <text class="ping_val">：{{ hui_val_Name.reply_content }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { supabase } from '@/utils/init'
// 地图
const latitude = ref(39.542) // 纬度
const longitude = ref(116.2529) // 经度
const scale = ref(14) // 缩放级别
const marker = ref([]) // 标记点
const ly_size = ref(0) // 评论数量
const comment_content = ref([]) // 评论内容
const reply_data = ref([]) // 回复内容

const handleClick = () => {
  console.log('121111')
}
const steps = ref([
  { key: 0, title: '定金' },
  { key: 1, title: '设计' },
  { key: 2, title: '拆改' },
  { key: 3, title: '水电' },
  { key: 4, title: '木工' },
  { key: 5, title: '瓦工' },
  { key: 6, title: '油工' },
  { key: 7, title: '安装' },
  { key: 8, title: '完工' },
  { key: 9, title: '软装' },
  { key: 10, title: '入住' },
])

const activeStep = ref(5)
const currentData = ref({
  id: 1,
  image:
    'https://coumbga5g6hc2l9v8nk0.baseapi.memfiredb.com/storage/v1/object/public/avatar/tu1.png?t=2024-06-27T17%3A13%3A40.097Z',
  title: '『东城逸家逸品园』175㎡典雅|追求品质生活',
})
onLoad(async (option) => {
  console.log('测试: ' + option.id) // 打印出上个页面传递的参数。
  currentData.value = await getData(option.id)
  console.log(currentData.value)
})
const formatNumber = (n) => {
  n = n.toString()
  return n[1] ? n : '0' + n
}
const formatTime = (dates) => {
  const date = new Date(dates)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return (
    [year, month, day].map(formatNumber).join('/') +
    ' ' +
    [hour, minute, second].map(formatNumber).join(':')
  )
}
// 获取评论数量
const getCommentCount = async (post_id) => {
  const { data, error } = await supabase
    .from('comment')
    .select('*')
    .eq('post_id', post_id)
    .order('created_at')
  if (data && data) {
    data.forEach((i) => {
      i.created_at = formatTime(i.created_at)
    })
    comment_content.value = data
    ly_size.value = data.length
  }
}
// 获取回复
const getReplyData = async () => {
  const { data, error } = await supabase.from('reply').select('*')
  if (data && data.length > 0) {
    reply_data.value = data
  } else {
    reply_data.value = []
  }
}
const getData = async (id) => {
  let tempData = {}
  try {
    const { data: workouts, error } = await supabase
      .from('workouts')
      .select('*')
      .limit(1)
      .eq('id', id)
    if (error) throw error
    // 当为undefined转为空数组
    if (workouts === undefined) {
      tempData = {}
    } else {
      tempData = workouts[0]
    }
    getCommentCount(id)
    getReplyData()

    return {
      ...tempData,
      userName: '可我会像',
      date: '2022年5月20日',
      color: 'red',
      label: ['水电'],
      title: '全新出发，新版本已上线，欢迎三连',
      mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
      viewUser: {
        latestUserAvatar: [
          {
            src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
          },
          {
            src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
          },
          {
            src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
          },
          {
            src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
          },
        ],
        viewUserCount: 567,
      },
      collectionCount: 543,
      commentCount: 543,
      likeCount: 206,
    }
  } catch (error) {
    console.warn(error.message)
  }
}
</script>

<style scoped>
.image-article {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border: 1rpx solid #f8f7f8;
  border-radius: 8rpx;
}

.image-pic {
  height: 300rpx;
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  border-radius: 15rpx;
}

.cell-icon {
  box-sizing: border-box;
  display: block;
  width: 16px;
  height: 24px;
  padding: 4px 0;
  margin-right: 4px;
  background: url('https://img10.360buyimg.com/jmadvertisement/jfs/t1/71075/7/3762/1820/5d1f26d1E0d600b9e/a264c901943080ac.png')
    no-repeat;
  background-size: cover;
}
:deep(.custom-value) {
  position: absolute;
  top: 50%;
  right: 0;
  white-space: nowrap;
  transform: translate(0, -50%);
}
.custom-text {
  color: #f0883a;
}
.end-time {
  display: inline-block;
  padding: 0 4px;
  margin-left: 8px;
  font-size: 10px;
  color: #faa21e;
  border: 1px solid #faa21e;
}

.quanbupinglun {
  padding-bottom: 20rpx;
  margin-top: 12rpx;
  border-bottom: 1px solid rgba(230, 230, 230, 0.418);
}
.ping_contents {
  margin-top: 22rpx;
}
.ping_box {
  display: flex;
  color: rgb(88 113 234);
}

.ping_zhanshi {
  padding-bottom: 170rpx;
  font-size: 13px;
}
.ping_useame_01 {
  display: inline-block;
  width: 116rpx;
  /* color: rgb(24 79 232); */
  margin-right: 18rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ping_val {
  color: #000;
}
</style>
